<template>
  <simple-table
    :url-list="urlList"
    :current-use-btn-list="currentUseBtnList"
    :filed-property-list="filedPropertyList"
    submit-form-title="后端api信息"
  ></simple-table>
</template>

<script lang="ts" setup>
import SimpleTable from "@/components/table/simple/SimpleTable.vue";
import { BtnNameEnum } from "@/components/table/simple/BtnNameEnum";
import { RuleEnum } from "@/components/form/basic/FormEnum";

const urlList = {
  refreshUrl: "/basic-request/backend-api/search",
  modifyingSingleUrl: "/basic-request/backend-api",
  deleteUrl: "/basic-request/backend-api/batch-delete",
};
// 当前页面使用的功能按钮
const currentUseBtnList: BtnNameEnum[] = [
  BtnNameEnum.ADD,
  BtnNameEnum.REFRESH,
  BtnNameEnum.DELETE,
  BtnNameEnum.BATCH_IMPORT,
];
const filedPropertyList = [
  {
    filedName: "id",
    label: "ID",
    span: 8,
    width: 120,
    minWidth: 120,
    showInTable: false, // 该字段内容是否需要在表格中渲染显示.
    showInForm: false,
    formType: "el-form-text",
  },
  {
    filedName: "type",
    label: "API类型",
    width: 120,
    minWidth: 120,
    showInTable: true, // 该字段内容是否需要在表格中渲染显示.
    showInForm: true,
    formType: "el-form-select-dropdown",
    formatter: {
      string: [
        { label: "资源访问", value: "0" },
        { label: "数据操作", value: "1" },
      ],
    },
    rules: [
      {
        ruleName: RuleEnum.REQUIRED,
        ruleValue: true,
        message: "API类型不能为空",
      },
    ],
    meta: {
      optionList: [
        { label: "资源访问", value: "0" },
        { label: "数据操作", value: "1" },
      ],
    },
  },
  {
    filedName: "name",
    label: "操作类型",
    width: 120,
    minWidth: 120,
    showInTable: true, // 该字段内容是否需要在表格中渲染显示.
    showInForm: true,
    formType: "el-form-text",
    rules: [
      {
        ruleName: RuleEnum.REQUIRED,
        ruleValue: true,
        message: "操作类型不能为空",
      },
    ],
  },
  {
    filedName: "fullName",
    label: "具体名称",
    width: 120,
    minWidth: 120,
    showInTable: true, // 该字段内容是否需要在表格中渲染显示.
    showInForm: true,
    formType: "el-form-text",
    rules: [
      {
        ruleName: RuleEnum.REQUIRED,
        ruleValue: true,
        message: "具体名称不能为空",
      },
    ],
  },
  {
    filedName: "method",
    label: "请求方式",
    width: 180,
    minWidth: 120,
    showInTable: true, // 该字段内容是否需要在表格中渲染显示.
    showInForm: true,
    required: true,
    formType: "el-form-select-dropdown",
    rules: [
      {
        ruleName: RuleEnum.REQUIRED,
        ruleValue: true,
        message: "请求方式不能为空",
      },
    ],
    meta: {
      optionList: [
        { label: "POST", value: "POST" },
        { label: "GET", value: "GET" },
        { label: "PUT", value: "PUT" },
        { label: "DELETE", value: "DELETE" },
      ],
    },
  },
  {
    filedName: "apiPath",
    label: "请求路径",
    width: 500,
    minWidth: 120,
    showInTable: true,
    showInForm: true,
    align: "left",
    formType: "el-form-text",
    rules: [
      {
        ruleName: RuleEnum.REQUIRED,
        ruleValue: true,
        message: "请求路径不能为空",
      },
    ],
  },
  {
    filedName: "classMethod",
    label: "类方法",
    width: 600,
    minWidth: 120,
    showInTable: true,
    showInForm: true,
    align: "left",
    formType: "el-form-text",
    rules: [
      {
        ruleName: RuleEnum.REQUIRED,
        ruleValue: true,
        message: "类方法不能为空",
      },
    ],
  },
  {
    filedName: "pc",
    label: "是否是电脑方法",
    minWidth: 150,
    showInTable: true,
    showInForm: true,
    formType: "el-form-select-dropdown",
    formatter: {
      number: [
        { label: "手机端", value: 0 },
        { label: "电脑端", value: 1 },
        { label: "电脑端&手机端", value: 2 },
      ],
    },
    rules: [
      {
        ruleName: RuleEnum.REQUIRED,
        ruleValue: true,
        message: "使用区域不能为空",
      },
    ],
    meta: {
      optionList: [
        { label: "手机端", value: "0" },
        { label: "电脑端", value: "1" },
        { label: "电脑端&手机端", value: "2" },
      ],
    },
  },
  {
    filedName: "createUser",
    label: "创建人",
    span: 8,
    minWidth: 220,
    showInTable: true,
    showInForm: false,
    formType: "el-form-text",
  },
  {
    filedName: "createGmt",
    label: "创建时间",
    span: 8,
    minWidth: 230,
    showInTable: true,
    showInForm: false,
    formType: "el-form-picker-date",
  },
  {
    filedName: "modifiedUser",
    label: "修改人",
    span: 8,
    minWidth: 220,
    showInTable: true,
    showInForm: false,
    formType: "el-form-text",
  },
  {
    filedName: "modifiedGmt",
    label: "修改时间",
    span: 8,
    minWidth: 230,
    showInTable: true,
    showInForm: false,
    formType: "el-form-picker-date",
  },
];
</script>

<style scoped></style>
